<template>
  <div class="app-container" style="margin-left: 50px;margin-right: 50px">
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="车牌号">
        <el-input
          v-model="queryParams.plateNum"
          placeholder="请输入车牌号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车牌颜色">
        <el-input
          v-model="queryParams.plateColor"
          placeholder="请输入车牌颜色"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="orderList"
      v-loading="loading"
      border
      highlight-current-row
      style="width: 100%;"
    >
      <!-- 编号列 -->
      <el-table-column label="编号" type="index" width="60" />

      <!-- 新增停车场名称列 -->
      <el-table-column label="停车场名称" prop="parkName" width="160" />

      <!-- 新增用户名称列 -->
      <el-table-column label="用户名称" prop="userName" width="160" />

      <el-table-column label="车牌号" prop="plateNum" width="185" />
      <el-table-column label="车牌颜色" prop="plateColor" width="182" />
      <el-table-column label="进入时间" prop="entryTime" width="182" />
      <el-table-column label="离开时间" prop="exitTime" width="180" />
      <el-table-column label="停车时长" prop="parkingDuration" width="109" />
      <el-table-column label="停车费用" prop="parkFee" width="100" />
      <el-table-column label="支付状态" prop="status" width="80">
        <template slot="default" slot-scope="scope">
          <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
            {{ scope.row.status === '0' ? '已支付' : '待支付' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot="default" slot-scope="scope">
          <el-button type="text" size="small" @click="handleView(scope.row)">详情</el-button>
          <el-button
            v-if="scope.row.status === '1' && scope.row.exitTime"
            type="text"
            size="small"
            @click="handlePay(scope.row)"
          >
            支付
          </el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 删除确认弹窗 -->
    <el-dialog
      title="确认删除"
      :visible.sync="deleteDialogVisible"
      width="400px"
    >
      <span>确定要删除车牌号为 "{{ deleteForm.plateNum }}" 的停车订单吗？</span>
      <template slot="footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete">确认删除</el-button>
      </template>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="600px">
      <el-form :model="form" ref="formRef" label-width="100px">
        <el-form-item label="停车场名称">
          <el-input v-model="form.parkName" disabled />
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="form.userName" disabled />
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="form.plateNum" disabled />
        </el-form-item>
        <el-form-item label="车牌颜色">
          <el-input v-model="form.plateColor" disabled />
        </el-form-item>
        <el-form-item label="进入时间">
          <el-input v-model="form.entryTime" disabled />
        </el-form-item>
        <el-form-item label="离开时间">
          <el-input v-model="form.exitTime" disabled />
        </el-form-item>
        <el-form-item label="停车时长">
          <el-input v-model="form.parkingDuration" disabled />
        </el-form-item>
        <el-form-item label="停车费用">
          <el-input v-model="form.parkFee" disabled />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="open = false">关闭</el-button>
      </template>
    </el-dialog>

    <el-dialog title="模拟支付二维码" :visible.sync="payDialogVisible" width="300px">
      <div style="text-align: center;">
        <img :src="qrCodeUrl" style="width: 200px;" alt="二维码" />
        <p style="margin-top: 10px; color: gray;">仅供模拟扫码支付</p>
        <el-button type="success" @click="simulatePay">模拟扫码支付</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listParkOrder, deleteParkOrder } from '@/api/system/parkOrder';
import {generateParQr,parkingPay} from '@/api/system/order'

export default {
  data() {
    return {
      orderList: [], // 停车订单列表
      total: 0,      // 总记录数
      loading: false, // 加载状态
      open: false,    // 弹窗控制
      title: '',      // 弹窗标题
      deleteDialogVisible: false, // 删除确认弹框
      deleteId: null, // 记录待删除的订单ID
      deleteForm: {}, // 用于展示删除弹框中的详细信息
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        plateNum: '',
        plateColor: ''
      },
      form: {
        id: null,
        plateNum: '',
        plateColor: '',
        entryTime: '',
        exitTime: '',
        parkingDuration: '',
        parkFee: ''
      },
      payDialogVisible: false,
      qrCodeUrl: '',
      payingOrderId: null
    };
  },
  methods: {
    // 获取停车订单列表
    async getList() {
      this.loading = true;
      const res = await listParkOrder(this.queryParams);
      this.orderList = res.rows;
      this.total = res.total;
      this.loading = false;
    },

    // 查询操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // 重置查询条件
    resetQuery() {
      this.queryParams.plateNum = '';
      this.queryParams.plateColor = '';
      this.handleQuery();
    },

    // 查看停车订单详情
    handleView(row) {
      this.form = { ...row }; // 填充表单
      this.title = '停车订单详情';
      this.open = true;
    },

    // 删除停车订单，显示确认弹窗
    handleDelete(row) {
      this.deleteId = row.id; // 保存待删除的订单ID
      this.deleteForm = { ...row }; // 显示当前行的车牌号等信息
      this.deleteDialogVisible = true; // 打开删除确认弹窗
    },

    // 确认删除操作
    async confirmDelete() {
      try {
        await deleteParkOrder(this.deleteId);  // 调用删除接口
        this.$message.success('删除成功');
        this.getList();  // 刷新列表
        this.deleteDialogVisible = false;  // 关闭确认弹窗
      } catch (error) {
        this.$message.error('删除失败');
      }
    },

    //生成支付二维码
    async handlePay(row) {
      this.payingOrderId = row.id;
      const res = await generateParQr(row.id); // 返回二维码 base64 图片地址
      this.qrCodeUrl = res.data;
      this.payDialogVisible = true;
    },
    // 模拟支付按钮
    async simulatePay() {
      await parkingPay(this.payingOrderId);
      this.$message.success('支付成功');
      this.payDialogVisible = false;
      this.getList();
    }
  },
  mounted() {
    this.getList(); // 初始化加载停车订单列表
  }
};
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}
</style>
